<template>
  <q-layout view="hHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />

        <q-toolbar-title>
          Quasar App
        </q-toolbar-title>

        <div>Quasar v{{ $q.version }}</div>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" show-if-above bordered :breakpoint="767" :width="250">
      <q-list>
        <q-item-label header>
          哈哈
        </q-item-label>

        <a列表项item v-for="i in 侧边栏菜单" :key="i.title" v-bind="i" />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

    <q-footer>
      <q-tabs>
        <a页签tab v-for="i in 侧边栏菜单" :key="i.title" v-bind="i" />
      </q-tabs>
    </q-footer>
  </q-layout>
</template>

<script setup>
import { ref } from 'vue'
import a列表项item from 'components/a列表项item.vue'
import a页签tab from 'components/a页签tab.vue'

defineOptions({
  name: 'MainLayout'
})

import 侧边栏菜单 from 'src/router/侧边栏菜单'


const leftDrawerOpen = ref(false)

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>
<style>
@media screen and (min-width: 768px) {
  .q-footer {
    display: none;
  }
}
</style>
